<template>
  <div>
    视频路数
    <el-select v-model="size" placeholder="Select" style="width: 240px">
      <el-option
          v-for="item in [1,2,3,4,5,6,8]"
          :key="item"
          :label="item * item"
          :value="item"
      />
    </el-select>
  </div>
  <div class="full">
    <div style="width:  calc(100vw - 340px);height: calc(100vh - 344px);display: flex;">
      <div v-for="i in size">
        <div v-for="j in size" :style="{width: `calc((100vw - 340px)/${size})`, height:`calc((100vh - 344px)/${size})`}"
             style="padding: 4px;background: black; border:1px solid white;display: flex;align-items: center;justify-content: space-around;">
          <div :style="{width:`min(calc((100vw - 340px)/${size}),calc((100vh - 344px)/${size} * 1.7777))`}" style="position:relative;">
            <video-player :options="playerOptions" :src="'/api/live/'+list[((i-1)*size+j-1)]"></video-player>
            <el-button style="font-size: 22px;position : absolute;background-color:transparent; right: 20px;top: calc(50% - 30px);" @click="onCapture(deviceList[((i-1)*size+j-1)])" plain
                       :icon="CameraFilled"></el-button>
            <el-button style="font-size: 22px;position : absolute;background-color:transparent; right: 20px;top: calc(50% + 30px);" @click="onVideo(deviceList[((i-1)*size+j-1)])" plain
                       :icon="VideoCameraFilled"></el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="RealView" lang="ts">

import {onBeforeUnmount, onMounted, ref, watch} from "vue";
import 'video.js/dist/video-js.css'
import DeviceApi from "@/axios/DeviceApi";
import {VideoPlayer} from "@videojs-player/vue";
import type Device from "@/model/Device";
import {CameraFilled, VideoCameraFilled} from '@element-plus/icons-vue'
import {ElMessage, ElMessageBox} from "element-plus";
// 1、4、9、16、25、36、64
// 1、2、3、4、5、6、8
const size = ref(1);

const list = ref<string[]>([]);
const deviceList = ref<Device[]>([])

function onCapture(device: Device) {
  DeviceApi.capture(device.id as number).then(() => {
    ElMessage.success("抓拍成功，请前往我的抓拍查看。")
  }).catch(err => {
    ElMessage.error(err.msg)
  })
}

function onVideo(device: Device) {
  ElMessageBox.prompt('请输入录制时间', '输入', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPattern: /^[0-9]*$/,
    inputErrorMessage: '请输入整数'
  }).then((data) => {
    DeviceApi.video(device.id as number, Number(data.value)).then(() => {
      ElMessage.success("录制已开始，请耐心等待。")
    })
  }).catch(err => {
    ElMessage.error(err.msg)
  })

}

watch(size, () => {
  loadDevice()
})

function onLoad() {
  deviceList.value.forEach(item => {
    DeviceApi.getVideo(item.id as number);
  })
}

let id: number = 0;

function loadDevice() {
  DeviceApi.page({current: 1, size: size.value})
      .then(resp => {
        deviceList.value = resp.data?.records || []
        resp.data?.records.forEach(item => {
          DeviceApi.getVideo(item.id as number)
              .then(resp => {
                list.value.push(resp.data as string)
              })
          // 保活
          id = setInterval(() => {
            setTimeout(onLoad, 0)
          }, 1000 * 60)

        })
      })
}

onBeforeUnmount(() => {
  id && clearInterval(id)
  id = 0
})

onMounted(() => {
  loadDevice();
});
const playerOptions = ref({
  autoplay: false, // 如果true,浏览器准备好时开始回放。
  muted: true, // 默认情况下将会消除任何音频。
  loop: true, // 导致视频一结束就重新开始。
  preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
  language: 'zh-CN',
  fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
  fill: true,
  notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
  controls: true,
  responsive: true,
  aspectRatio: "16:9",
  hls: {xhr: {"withCredentials": false}},
  controlBar: {
    timeDivider: true,
    durationDisplay: true,
    remainingTimeDisplay: false,
    fullscreenToggle: true // 全屏按钮
  }
})

</script>

<style lang="less" scoped>
.full {
  display: flex;
  width: calc(100vw - 240px);
  height: calc(100vh - 244px);
  align-items: center;
  justify-content: space-around;
}
</style>